<!DOCTYPE html>
<html>
<head>
    <title>萌宠大作战/首页</title>
    <meta http-equiv="Content-Type" Content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href={{ url_for('static', filename = 'css/bootstrap.min.css') }}>
    <link rel="stylesheet" type="text/css" href={{ url_for('static', filename = 'css/footer.css') }}>
    <link rel="stylesheet" type="text/css" href={{ url_for('static', filename = 'css/top.css') }}>
    <link rel="stylesheet" type="text/css" href={{ url_for('static', filename = 'css/index.css') }}>
    <link rel="stylesheet" type="text/css" href={{ url_for('static', filename = 'css/media.css') }}>
    <script src="https://unpkg.com/axios/dist/axios.min.js" rel="external nofollow" ></script>
        <script type="text/javascript" src="../static/js/jquery.min.js"></script>
        <script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
{#        <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">#}
{#     	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">#}
{# 	    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>#}
{#        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>#}
{#        <link rel="stylesheet" type="text/css" href="../static/css/footer.css">#}
{#        <link rel="stylesheet" type="text/css" href="../static/css/top.css">#}
{#        <link rel="stylesheet" type="text/css" href="../static/css/index.css">#}
{#        <link rel="stylesheet" type="text/css" href="../static/css/media.css">#}
</head>

<body style="background: url('../static/img/bk.jpg') 0 / cover fixed;">

  <!-- 最上面一层导航栏（个人中兴）-->
    <nav class="navbar navbar-default navbar-fixed-top">

        <div class="container-fluid nav-con">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>

            <a class="navbar-brand" href="usercenter" style="padding-top: 0.7rem;">
                <span style="font-size: 1.7rem;padding-right: 1rem">萌宠大作战</span>
            </a>
            <a class="navbar-brand sign"  style="padding-top: 0.7rem;" href="#">
                <span style="font-size: 1.4rem;color: red">[收藏我们]</span></a>

            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="navli"><a href="{{login}}"><p class="text-primary">{{ mylogin }}</p></a></li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">发布 <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="{{ url_for('publish.publish') }}">发布文章</a></li>
            <li><a href="#">发布商品</a></li>
          </ul>

        </li>


        <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">新手入门 <span class="caret"></span></a>

                <ul class="dropdown-menu">
                <li><a href="#">购物保障</a></li>
                <li><a href="#">购物流程</a></li>
                <li><a href="#">常见问题</a></li>
                </ul>

        </li>


        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">帮助中心 <span class="caret"></span></a>

            <ul class="dropdown-menu">
            <li><a href="#">配送方式</a></li>
            <li><a href="#">货到付款</a></li>
            <li><a href="#">售后服务</a></li>
            <li><a href="#">订单状态</a></li>
            <li><a href="{{ url_for('admin.admin') }}">管理员</a></li>
            </ul>

        </li>

      </ul>
    </div>

        </div>
    </nav>




    <!-- 搜索引擎 -->
    <div class="container-fluid main no-padding" style="overflow: hidden;">

        <div class="col-md-12 col-xs-12 main-search">

              <div class="col-md-2 col-xs-4 no-padding main-logo-div">
                <div class="col-md-5 col-xs-5 no-padding">
                  <img class="main-logo" src="../static/img/logo.png">
                </div>
                <div class="col-md-7 col-xs-7 no-padding logo-font">
                  <span class="zh">萌宠</span><br/>
                </div>
              </div>


              <div class="col-md-7 col-xs-8 search-div">

                <div class="col-md-12 col-xs-12 no-padding">

                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                      <button class="btn btn-default" style="outline: none" type="button">
                        <span style="color: black" class="glyphicon glyphicon-search" aria-hidden="true"></span>
                      </button>
                    </span>
                  </div>

                </div>

              </div>

        </div>

    </div>





      <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">推荐</a></li>
      <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">动态</a></li>
      <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">商城</a></li>
      <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">设置</a></li>
    </ul>

      <!-- Tab panes -->
    <div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active fade" id="home">


 
          <!------交流社区-->
      <div class="container">

        <div class="row" style="margin-top:10px;">
                <!-- 左边讨论 -->
          <div class="com container col-xs-8">

              <ul class="media-list">

                 {% for article, user in users.items() %}
                    <li class="media mymedia">
                      <!---- 用户头像   ---->
                          <div class="media-left media-middle">
                                  <img src="{{ url_for('static',filename=user.pimg)}}" width="40px" height="40px" class="media-object img-circle">

                              </div>
                                  <!---- 文章标题与内容   ---->

                                    <div class="media-body">
                                        <div class="media-heading row" style="font-weight:700">
                                        <a href="{{ url_for('article.article',id=article.id )}}">
                                        <h5 class="col-xs-3">{{ article.arc_name[:8]+'...' }}</h5>
                                        </a>
                                        <span class="glyphicon glyphicon-plus col-xs-2" style="margin-top:8px ;" onclick="attention({{article.id}})">关注</span>
                                        <h5 class="col-xs-6">发布于-{{article.arc_time}}-{{article.arc_location[:5]}}</h5>
                                        
                                      </div>
                                      <p>{{ article.arc_content[:45]+"..." }}</p>
                                      <div class="row">
                                          <span id="{{ article.alike }}" class="glyphicon glyphicon-thumbs-up col-xs-3" aria-hidden="true" onclick="like({{article.id}})" >
                                              <span class="badge tagmove">{{article.arc_click}}</span>
                                            </span>

                                          <span class="glyphicon glyphicon-thumbs-down col-xs-3"></span>
                                          <span class="glyphicon glyphicon-comment col-xs-3">
                                              <span class="badge tagmove">2</span>
                                          </span>
                                          <span class="glyphicon glyphicon-star-empty col-xs-3">
                                              <span class="badge tagmove">3</span>
                                          </span>
                                      </div>
                                  </div>

                    </li>
                 {% endfor %}

              </ul>

          </div>    

                <!-- 右边讨论 -->
          <div class="com container col-xs-4">

            <ul class="media-list">

                    {% for article, user in users.items() %}

                      <li class="media mymedia2">
                      <!---- 用户头像   ---->
                          <div class="media-left media-middle">
                              <a href="#">
                                  <img src='../static/img/productpicture/test.jpg' width="50px" height="50px" class="media-object">
                              </a>
                              </div>
                                  <!---- 文章标题与内容   ---->
                                <div class="media-body">
                                    <div class="media-heading row">
                                    <h5 class="col-xs-6">{{ article.arc_name[:6]+"..." }}</h5>
                                    <h5 class="col-xs-6">来自-{{article.arc_author}}</h5>
                                  </div>
                                  <p>{{ article.arc_content[:10]+"..." }}</p>
                              </div>
                      </li>
                {% endfor %}
            </ul>
          </div>
          
        </div>

      </div>



    </div>

    <div role="tabpanel" class="tab-pane fade" id="profile">
      <div class="container">

        <div class="jumbotron" style="margin-top: 10px;">关注的头像</div>
        <div class="well">关注的人发的文章</div>
      </div>

    </div>
    <div role="tabpanel" class="tab-pane fade" id="messages">

        <div class="container-fluid star">
	<div class="s-lg-title">
	  <span class="page-title">最新商品</span>
	</div>


	<div class="sgoods-content">
	  <ul class="sgoods-list clearfix" style="margin-left: 0px; transition: margin-left 0.5s ease;">
		  {% for ite in item %}
		  <li class="sgoods-item">
		  <div class="sgoods-thumb">
			<a href=""><img src="{{ url_for('static',filename=ite.image_url)}}"></a>
		  </div>
		  <div class="goods-title">
			<a href="book/infor.html" class="title">商品名称：{{ ite.item_name }}</a>
		  </div>
		  <p class="goods-info">品牌方:{{ ite.author }}</p>
		  <p class="goods-price">￥：{{ ite.price }} </p>
		</li>
		  {% endfor %}
	  </ul>

	  </div>

</div>


    </div>



    <div role="tabpanel" class="tab-pane fade" id="settings">设置</div>


  </div>


</body>

<script type="text/javascript">
  function like(id){
    axios({
    method: 'get',
    url: 'like/'+id,
    baseURL: 'http://127.0.0.1:5000/api/',
    params: {
      
    }
    }).then(function(response){
            console.log(response.data);
            var alike = "like" + id
            var alllike = document.getElementById(alike)
            console.log(alike)
            console.log(alllike)
            alllike.innerHTML = response.data
           }
          )
        }


  function attention(id){
      axios({
          method: 'get',
          url:'attention/' + id,
          baseURL: 'http://127.0.0.1:5000/api/'
      }).then(function(response){
  })
  }
</script>
</html>

